---
title: علامة
image: /images/user-guide/table-views/table.png
---

<Frame>
  <img src="/images/user-guide/table-views/table.png" alt="Header" />
</Frame>

Component to visually categorize or label content.

<Tabs>

<Tab title="Usage">

```jsx
import { Tag } from "@/ui/display/tag/components/Tag";

export const MyComponent = () => {
  return (
    <Tag
      className
      color="red"
      text="Urgent"
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| المحددات  | النوع  | الوصف                                                                                                                                                                 |
| --------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className | string | اسم اختياري لتنسيقات إضافية                                                                                                                                           |
| اللون     | string | لون العلامة. الخيارات تشمل: `أخضر`, `تركواز`, `سماوي`, `أزرق`, `أرجواني`, `وردي`, `أحمر`, `برتقالي`, `أصفر`, `رمادي`. |
| نص        | string | محتوى العلامة                                                                                                                                                         |
| عند النقر | وظيفة  | دالة اختيارية تُستدعى عند نقر المستخدم على العلامة                                                                                                                    |

</Tab>

</Tabs>
